<template>
  <div id="simulation-main-container" class="main-container">
    <div class="mc-left xsz-container" v-show="activeDevice == DEVICETYPE.XSZ">
      <div class="mc-left-1">
        <div class="sub-top">
          <div class="wc-left">
            <div class="icon"></div>
          </div>
          <div class="wc-right">
            <div class="wc-right-container">
              <div class="wc-right-top">当前泄水流量</div>
              <div class="wc-right-bottom">53423 m³/s</div>
            </div>
          </div>
        </div>
        <div class="sub-bottom"></div>
      </div>

      <div class="mc-left-2">
        <div class="sub-top">
          <h3>泄水闸控制表</h3>
        </div>
        <div class="sub-bottom">
          <div v-for="group in xszGroups" :key="group.title">
            <div class="group-title">
              <a-checkbox
                @change="
                  e => {
                    groupChange(e, group);
                  }
                "
              >
              </a-checkbox>
              <span>{{ group.title }}</span>
            </div>
            <div class="opratebtns">
              <div
                class="oprateitem"
                v-for="item in opennessInfo.filter(x => x.group == group.title)"
                :key="item.code"
              >
                <div class="checkboxitem">
                  <a-checkbox v-model="item.checked"></a-checkbox>
                </div>
                <div class="btnitem">
                  <div class="text-1">{{ item.name }}</div>
                  <!-- <div class="text-2">开合度</div> -->
                  <div class="slider">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="item.openness"
                          :min="0"
                          :max="100"
                          :step="1"
                          :data-id="item.code"
                          @change="
                            value => {
                              opennessChange2(value, item);
                            }
                          "
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="item.openness2"
                          :min="0"
                          :max="100"
                          :step="1"
                          :formatter="percentFormatter"
                          :data-id="item.code"
                          @pressEnter="
                            e => {
                              opennessChange(e, item);
                            }
                          "
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-left cz-container" v-show="activeDevice == DEVICETYPE.CZ">
      <div class="mc-left-2">
        <div class="sub-top">
          <h3>船闸上、下游闸门</h3>
        </div>
        <div class="sub-bottom">
          <div class="opratebtns">
            <div class="oprateitem" v-for="(cz, i) in czList" :key="i">
              <div class="title">{{ cz.title }}</div>
              <div class="btn">
                <a-switch
                  :disabled="cz.disabled"
                  @change="
                    checked => {
                      onCZChange(checked, cz);
                    }
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="mc-left slfdjz-container"
      v-show="activeDevice == DEVICETYPE.SLFDJZ"
    >
      <div class="mc-left-2">
        <div class="sub-top">
          <h3>水轮发电机组</h3>
        </div>
        <div class="sub-bottom">
          <div class="opratebtns">
            <div class="oprateitem" v-for="(fdj, i) in slfdjzList" :key="i">
              <div class="title">{{ fdj.title }}</div>
              <div class="btn">
                <a-switch
                  v-model="fdj.checked"
                  @change="
                    checked => {
                      onFDJChange(checked, fdj);
                    }
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-center"></div>

    <div class="mc-right">
      <div class="mc-right-sub mc-right-4">
        <div class="sub-top">
          <h3>环境设置</h3>
        </div>
        <div class="sub-bottom">
          <div class="data-container">
            <div class="data-item">
              <div class="title">
                <span>天气设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.weather }"
                  @click="shrinkbtnClick(1)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.weather">
                <div class="env-item">
                  <div class="item-title">天气</div>
                  <div class="item-btns">
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.CLOUDY
                      }"
                      @click="weatherClick(WEATHERTYPE.CLOUDY)"
                    >
                      阴天
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.SUNNY
                      }"
                      @click="weatherClick(WEATHERTYPE.SUNNY)"
                    >
                      晴天
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.RAINY
                      }"
                      @click="weatherClick(WEATHERTYPE.RAINY)"
                    >
                      下雨
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.SNOWY
                      }"
                      @click="weatherClick(WEATHERTYPE.SNOWY)"
                    >
                      下雪
                    </div>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">时间</div>
                  <div class="item-btns">
                    <div
                      class="btn"
                      @click="changeDayNight(true)"
                      :class="{ active: !light.isnight }"
                    >
                      白天
                    </div>
                    <div
                      class="btn"
                      @click="changeDayNight(false)"
                      :class="{ active: light.isnight }"
                    >
                      夜晚
                    </div>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">光源强度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="light.strength"
                          :min="0"
                          :max="2"
                          :step="0.1"
                          @change="lightStrengthChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="light.strength"
                          :min="0"
                          :max="2"
                          :step="0.1"
                          :formatter="percentFormatter"
                          @change="lightStrengthChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">光源角度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="light.times"
                          :min="6"
                          :max="18"
                          :step="0.5"
                          @change="lightTimesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="light.times"
                          :min="6"
                          :max="18"
                          :step="0.5"
                          :formatter="angleFormatter"
                          @change="lightTimesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <!-- <div class="env-item">
                  <div class="item-title">光源角度</div>
                  <div class="item-btns item-btns-1">
                    <div class="subitem">
                      <div class="subitem-title">水平角度</div>
                      <a-row>
                        <a-col :span="18">
                          <a-slider
                            v-model="light.horizontalAngle"
                            :min="-180"
                            :max="180"
                            :step="1"
                            @change="horizontalAngleChange"
                          />
                        </a-col>
                        <a-col :span="6">
                          <a-input-number
                            v-model="light.horizontalAngle"
                            :min="-180"
                            :max="180"
                            :step="1"
                            :formatter="angleFormatter"
                            @change="horizontalAngleChange"
                          />
                        </a-col>
                      </a-row>
                    </div>
                    <div class="subitem">
                      <div class="subitem-title">垂直角度</div>
                      <a-row>
                        <a-col :span="18">
                          <a-slider
                            v-model="light.verticalAngle"
                            :min="-180"
                            :max="180"
                            :step="1"
                            @change="verticalAngleChange"
                          />
                        </a-col>
                        <a-col :span="6">
                          <a-input-number
                            v-model="light.verticalAngle"
                            :min="-180"
                            :max="180"
                            :step="1"
                            :formatter="angleFormatter"
                            @change="verticalAngleChange"
                          />
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </div> -->
              </div>
            </div>
            <div class="data-item">
              <div class="title">
                <span>水体设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.water }"
                  @click="shrinkbtnClick(2)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.water">
                <div class="env-item">
                  <div class="item-title">水面颜色</div>
                  <div class="item-btns">
                    <div class="subitem">
                      <a-row>
                        <a-col :span="18">
                          <sketchPicker @change="changeColor2"> </sketchPicker>
                        </a-col>
                        <a-col :span="6">
                          {{ waterSurface.waterColourDark }}
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                  <div class="item-btns">
                    <div class="subitem">
                      <a-row>
                        <a-col :span="18">
                          <sketchPicker @change="changeColor"></sketchPicker>
                        </a-col>
                        <a-col :span="6">
                          {{ waterSurface.waterColourLight }}
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">波纹速度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.waveNormalSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveNormalSpeedChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.waveNormalSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveNormalSpeedChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <!-- <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.waveSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveSpeedChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.waveSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveSpeedChange"
                        />
                      </a-col>
                    </a-row>
                  </div> -->
                </div>
                <div class="env-item">
                  <div class="item-title">波纹大小</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.largerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="largerRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.largerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="largerRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.mediumRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="mediumRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.mediumRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="mediumRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.smallerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="smallerRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.smallerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="smallerRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">波纹强度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalLargeIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalLargeIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalLargeIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalLargeIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalMedIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalMedIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalMedIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalMedIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalSmallIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalSmallIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalSmallIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalSmallIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <div class="data-item">
              <div class="title">
                <span>其他设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.other }"
                  @click="shrinkbtnClick(3)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.other"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-bottom">
      <div
        class="type-item type-item-1"
        :data-id="DEVICETYPE.XSZ"
        ref="item1"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">泄水闸</span>
      </div>
      <div
        class="type-item type-item-2"
        :data-id="DEVICETYPE.CZ"
        ref="item2"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">船闸</span>
      </div>
      <div
        class="type-item type-item-3"
        :data-id="DEVICETYPE.SLFDJZ"
        ref="item3"
        @click="deviceTypeChangeHandle"
      >
        <div class="item-left"></div>
        <div class="item-right">
          <span class="text">水轮发电机组</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import waterdatas from "@/datas/water.json";
import * as echarts from "echarts";
import ChartBlock from "@components/ChartBlock";
import SketchPicker from "@components/MySketchPicker";
import xszdevice from "@/datas/xszdevice.json";
export default {
  name: "SimulationManage",
  components: {
    ChartBlock: ChartBlock,
    SketchPicker: SketchPicker
  },
  data() {
    return {
      //过船闸闸门
      czList: [
        {
          title: "往下游",
          disabled: false,
          //视角参数
          locationParam: {
            location: {
              x: -20652.734375,
              y: -4612.9384765625,
              z: 6278.5126953125
            },
            pitch: -24.029996871948242,
            yaw: 90.47452545166016
          },
          //闸门
          zm: [
            //上游闸门
            {
              code: "S_XZSRZM1",
              //打开旋转后的目标值
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              //关闭还原时的目标值
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              //
              location: { x: -21232.541016, y: 1254.09082, z: 3664.242676 }
            },
            {
              code: "S_XZSRZM2",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          zm2: [
            //下游闸门
            {
              code: "S_XZSRZM3",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            },
            {
              code: "S_XZSRZM4",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          water: {
            //上游水位
            targetCode: "S_SYSM_001",
            // targetWaterZ: 4352,
            //中间水位
            code: "S_ZSSM_01",
            // //手动设置一个水位差值
            // vectorZ: -205,
            //下游水位
            targetCode2: "S_XYSM_002"
          },
          //船模型
          boards: [
            {
              //模型code
              code: "SM_Ship01",
              //移动参数
              oldLocation: {
                x: -23696.972656,
                y: -24146.587891,
                z: 4087.851318,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              //闸门口的点位置
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              //船中间排队的位置
              thirdLocation: {
                x: -20760.130859,
                y: 13388.34375,
                z: 4036.533447,
                duration: 15
              },
              // (X=-19958.248047,Y=98220.750000,Z=3688.205811)
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 2250,
                y: 36720,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship02",
              //移动参数
              oldLocation: {
                //(X=-23650.802734,Y=-26530.337891,Z=4036.549561)
                x: -23650.802734,
                y: -26530.337891,
                z: 4036.549561,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              thirdLocation: {
                x: -20719.773438,
                y: 11161.117188,
                z: 4036.52124,
                duration: 15
              },
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship03",
              //移动参数
              oldLocation: {
                //(X=-23773.128906,Y=-28855.052734,Z=4106.348633)
                x: -23773.128906,
                y: -28855.052734,
                z: 4106.348633,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              thirdLocation: {
                x: -19332.513672,
                y: 14508.478516,
                z: 3701.871582,
                duration: 15
              },
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship04",
              //移动参数
              oldLocation: {
                //(X=-23777.330078,Y=-30990.568359,Z=4051.878418)
                x: -23777.330078,
                y: -30990.568359,
                z: 4051.878418,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              thirdLocation: {
                x: -19447.798828,
                y: 11390.463867,
                z: 4688.922852,
                duration: 15
              },
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship05",
              //移动参数
              oldLocation: {
                //(X=-23578.498047,Y=-34337.687500,Z=4067.072021)
                x: -23578.498047,
                y: -34337.6875,
                z: 4067.072021,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              thirdLocation: {
                x: -19631.576172,
                y: 8400.380859,
                z: 4067.065186,
                duration: 15
              },
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship06",
              //移动参数
              oldLocation: {
                //(X=-23833.009766,Y=-38666.589844,Z=4287.411621)
                x: -23833.009766,
                y: -38666.589844,
                z: 4287.411621,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              secondLocation: {
                x: -20047.966797,
                y: -9931.181641,
                z: 4036.533447,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              thirdLocation: {
                x: -20635.177734,
                y: 6177.989258,
                z: 4287.425293,
                duration: 15
              },
              movetoLocation: {
                x: -19958.248047,
                y: 98220.75,
                z: 3688.205811,
                duration: 20
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            }
          ],
          board: {
            //模型code
            code: "SM_Ship01",
            //移动参数
            moveParam: {
              x: 0,
              y: 7000,
              z: 0
            },
            //移动时间
            duration: 10,
            //船吃水深，入水参数
            intoWaterZ: 20
          }
        },
        {
          title: "往上游",
          disabled: false,
          //视角参数
          locationParam: {
            location: {
              x: -19840.146484375,
              y: 19828.654296875,
              z: 7162.49169921875
            },
            pitch: -57.5867919921875,
            yaw: 96.51459503173828
          },
          //闸门
          zm: [
            {
              code: "S_XZSRZM3",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            },
            {
              code: "S_XZSRZM4",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          zm2: [
            {
              code: "S_XZSRZM1",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              location: { x: -21232.541016, y: 1254.09082, z: 3664.242676 }
            },
            {
              code: "S_XZSRZM2",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          water: {
            //上游水位
            targetCode: "S_XYSM_002",
            // targetWaterZ: 4352,
            //中间水位
            code: "S_ZSSM_01",
            //手动设置一个水位差值
            vectorZ: 0,
            //下游水位
            targetCode2: "S_SYSM_001"
          },
          //船模型
          boards: [
            {
              //模型code
              code: "SM_Ship11",
              //移动参数
              oldLocation: {
                //(X=-23830.908203,Y=46559.332031,Z=3557.564453)
                x: -23830.908203,
                y: 46559.332031,
                z: 3557.564453,

                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              secondLocation: {
                //(X=-20121.865234,Y=32264.535156,Z=3557.656738)
                x: -20121.865234,
                y: 32264.535156,
                z: 3557.656738,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              thirdLocation: {
                // (X=-20575.646484,Y=6698.706543,Z=4189.982422)
                x: -20575.646484,
                y: 6698.706543,
                z: 4189.982422,
                duration: 15
              },
              movetoLocation: {
                // (X=-19745.109375,Y=-73866.898438,Z=4189.965820)
                x: -19745.109375,
                y: -73866.898438,
                z: 4189.96582,
                duration: 25
              },
              moveParam: {
                x: 2250,
                y: 36720,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship12",
              //移动参数
              oldLocation: {
                //(X=-23783.044922,Y=49493.035156,Z=3538.411133)
                x: -23783.044922,
                y: 49493.035156,
                z: 3538.411133,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              secondLocation: {
                x: -20121.865234,
                y: 32264.535156,
                z: 3557.656738,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              thirdLocation: {
                // (X=-19548.828125,Y=10057.866211,Z=4189.984375)
                x: -19548.828125,
                y: 10057.866211,
                z: 4189.984375,
                duration: 15
              },
              movetoLocation: {
                // (X=-19745.109375,Y=-73866.898438,Z=4189.965820)
                x: -19745.109375,
                y: -73866.898438,
                z: 4189.96582,
                duration: 25
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship13",
              //移动参数
              oldLocation: {
                //(X=-23728.574219,Y=53435.804688,Z=3429.513428)
                x: -23728.574219,
                y: 53435.804688,
                z: 3429.513428,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              secondLocation: {
                x: -20121.865234,
                y: 32264.535156,
                z: 3557.656738,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              thirdLocation: {
                // (X=-20490.539062,Y=14206.298828,Z=4189.988281)
                x: -20490.539062,
                y: 14206.298828,
                z: 4189.988281,
                duration: 15
              },
              movetoLocation: {
                // (X=-19745.109375,Y=-73866.898438,Z=4189.965820)
                x: -19745.109375,
                y: -73866.898438,
                z: 4189.96582,
                duration: 25
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            },
            {
              //模型code
              code: "SM_Ship14",
              //移动参数
              oldLocation: {
                //(X=-23722.181641,Y=58626.171875,Z=3572.885498)
                x: -23722.181641,
                y: 58626.171875,
                z: 3572.885498,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: 15
              },
              secondLocation: {
                x: -20121.865234,
                y: 32264.535156,
                z: 3557.656738,
                duration: 10,
                //旋转角度
                rotateX: 0,
                rotateY: 0,
                rotateZ: -15
              },
              thirdLocation: {
                // (X=-19514.437500,Y=16502.060547,Z=4189.986328)
                x: -19514.4375,
                y: 16502.060547,
                z: 4189.986328,
                duration: 15
              },
              movetoLocation: {
                // (X=-19745.109375,Y=-73866.898438,Z=4189.965820)
                x: -19745.109375,
                y: -73866.898438,
                z: 4189.96582,
                duration: 25
              },
              moveParam: {
                x: 0,
                y: 0,
                z: 0
              }
            }
          ]
        }
      ],
      //水轮发电机组
      slfdjzList: [
        {
          title: "1#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_07",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_08",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_1",
          watercodes: ["Niagara_ShorlineFoam_1", "Niagara_ShorlineFoam_11"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_01",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5"
        },
        {
          title: "2#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_06",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_05",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_2",
          watercodes: ["Niagara_ShorlineFoam_2", "Niagara_ShorlineFoam_12"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_02",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5"
        },
        {
          title: "3#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_04",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_03",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_3",
          watercodes: ["Niagara_ShorlineFoam_3", "Niagara_ShorlineFoam_13"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_03",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5"
        },
        {
          title: "4#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_02",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_01",
              moveParam: { x: 0, y: 0, z: 700 }
            },
            {
              code: "S_WSZM_04",
              moveParam: { x: 0, y: 0, z: 1600 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_4",
          watercodes: ["Niagara_ShorlineFoam_4", "Niagara_ShorlineFoam_14"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_04",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5"
        }
      ],
      //当前设备类型
      activeDevice: 1,
      //闸门数量
      receiveOption: null,
      bpOption: null,
      value2: null,
      opennessInfo: [],
      valueData: [],
      materialStock: {
        total: "1761件",
        curmonthOut: "171件",
        curmonthIn: "76件"
      },
      waterOption: null,
      //水粒子效果的id
      fluxWaterCode:
        "NODE_AddChildActorComponent-2_BP_FluxSurface_Default_C_CAT_16",
      //泄水闸打开最大角度
      maxangle: 40,
      //flux水流样式
      maxStyle: {
        volume: 5,
        speedX: 0,
        speedY: 2,
        edge: 10,
        intensity: 1,
        duration: -1
      },
      minStyle: {
        volume: 0,
        speedX: 0,
        speedY: 0,
        edge: 0,
        intensity: 0,
        duration: -1
      },
      //水面
      waterSurface: {
        waterColourDark: "#005339FF",
        waveNormalSpeed: -2,
        waveSpeed: 0,
        largerRipples: 2,
        mediumRipples: 4,
        smallerRipples: 0,
        normalLargeIntensity: 0.05,
        normalMedIntensity: 0.05,
        normalSmallIntensity: 1
      },
      //光照
      light: {
        code: "DirectionalLight",
        //是否黑夜
        isnight: false,
        //强度
        strength: 1,
        //时间
        times: 9.6,
        //垂直角度
        verticalAngle: 0,
        //水平角度
        horizontalAngle: 0
      },
      //天气
      weather: {
        curweather: "2"
      },
      //设置面板显示、隐藏
      envPanel: {
        weather: true,
        water: false,
        other: false
      },
      //天气类型
      WEATHERTYPE: {
        CLOUDY: "1",
        SUNNY: "2",
        RAINY: "3",
        SNOWY: "4"
      },
      //设备类型
      DEVICETYPE: {
        XSZ: 1,
        CZ: 2,
        SLFDJZ: 3
      }
    };
  },
  methods: {
    //水纹强度
    normalLargeIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalLargeIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    normalMedIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalMedIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    normalSmallIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalSmallIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //水纹大小
    largerRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        largerRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    mediumRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        mediumRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    smallerRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        smallerRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //水纹速度修改修改
    waveSpeedChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        waveSpeed: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //水纹速度修改修改
    waveNormalSpeedChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        waveNormalSpeed: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //暗色切换时
    changeColor2(color) {
      let ue4Viewer = this.ue4Viewer;
      this.waterSurface.waterColourDark = color.hex;
      ue4Viewer.waterStyle({ waterColourDark: color.hex });
    },
    //亮色切换时
    changeColor(color) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({ waterColourLight: color.hex });
    },
    //天气切换
    weatherClick(type) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.changeWeather(type);
      this.weather.curweather = type;
      //阴天
      if (type == this.WEATHERTYPE.CLOUDY) {
      }
      //晴天
      if (type == this.WEATHERTYPE.SUNNY) {
      }
      //雨天
      if (type == this.WEATHERTYPE.RAINY) {
      }
      //雪天
      if (type == this.WEATHERTYPE.SNOWY) {
      }
    },
    //白天、黑夜切换
    changeDayNight(isday) {
      this.light.isnight = !isday;
      let ue4Viewer = this.ue4Viewer;
      if (isday) {
        ue4Viewer.show(this.light.code);
        ue4Viewer.changeWeather(this.weather.curweather);
      } else {
        ue4Viewer.hide(this.light.code);
        ue4Viewer.changeWeather(this.weather.curweather, 2400);
      }
    },
    //水轮发电机组
    onFDJChange(checked, item) {
      let ue4Viewer = this.ue4Viewer;
      //开闸
      if (checked) {
        let param = item.locationParam;
        // ue4Viewer.flytoByParam(param);
        ue4Viewer.focus(item.zm[0].code, 1500);
        setTimeout(() => {
          //获取中心点的位置
          ue4Viewer.get(item.centercode, e => {
            for (let i = 0; i < item.zm.length; i++) {
              const zm = item.zm[i];
              ue4Viewer.get(zm.code, e2 => {
                let p = {
                  x: e2.location.x,
                  y: e2.location.y,
                  z: e.location.z + zm.moveParam.z
                };
                console.log(item.centercode, e, p);
                ue4Viewer.objectMoveTo(zm.code, p);
              });
            }
          });
        }, 2000);

        setTimeout(() => {
          //显示水花
          let watercodes = [];
          if (Array.isArray(item.watercodes) && item.watercodes.length > 0) {
            watercodes = item.watercodes;
          } else {
            watercodes.push(item.watercode);
          }
          for (let i = 0; i < watercodes.length; i++) {
            const watercode = watercodes[i];
            ue4Viewer.show(watercode);
            // //如果所有的都开了，就打开5
            // let uncheckedItem = this.slfdjzList.find((x) => !x.checked);
            // if (!uncheckedItem) {
            //   ue4Viewer.show("Niagara_ShorlineFoam_5");
            // }
          }
        }, 3 * 1000);
      } else {
        //关闸
        //获取中心点的位置
        ue4Viewer.get(item.centercode, e => {
          for (let i = 0; i < item.zm.length; i++) {
            const zm = item.zm[i];
            ue4Viewer.get(zm.code, e2 => {
              let p = {
                x: e2.location.x,
                y: e2.location.y,
                z: e.location.z - zm.moveParam.z
              };
              console.log(item.centercode, e, p);
              ue4Viewer.objectMoveTo(zm.code, p);
            });
          }
        });
        //显示水花
        let watercodes = [];
        if (Array.isArray(item.watercodes) && item.watercodes.length > 0) {
          watercodes = item.watercodes;
        } else {
          watercodes.push(item.watercode);
        }
        for (let i = 0; i < watercodes.length; i++) {
          const watercode = watercodes[i];
          ue4Viewer.hide(watercode);
        }
        // ue4Viewer.hide("Niagara_ShorlineFoam_5");
      }
    },
    setCzDisabled(disabled) {
      for (let i = 0; i < this.czList.length; i++) {
        const cz = this.czList[i];
        cz.disabled = disabled;
      }
    },
    //上游船闸
    onCZChange(checked, cz) {
      let ue4Viewer = this.ue4Viewer;
      //开闸
      if (checked) {
        //设置不可点击
        this.setCzDisabled(true);

        let param = cz.locationParam;
        //显示所有的船只
        ue4Viewer.show(cz.boards.map(x => x.code));
        //视角切换，跳转
        ue4Viewer.flytoByParam(param);

        let len = cz.boards.length;
        let duration = 0;

        //获取上游水位的位置
        ue4Viewer.get(cz.water.targetCode, e => {
          //位置-高度z
          let z = e.location.z;
          if (e.boxExtent.z > 0) {
            z = e.location.z + e.boxExtent.z;
          }

          //移动中间水位
          ue4Viewer.get(cz.water.code, e2 => {
            console.log("中间水位code2", cz.water.code);
            let p = {
              x: e2.location.x,
              y: e2.location.y,
              z: z //上游水位z值
            };
            //手动设置一个差值
            if (cz.water.vectorZ && cz.water.vectorZ != 0) {
              p.z = p.z + cz.water.vectorZ;
            }

            console.log(cz.water.code, e, e2, p);
            ue4Viewer.objectMoveTo(cz.water.code, p);
          });

          //打开闸门
          setTimeout(() => {
            for (let i = 0; i < cz.zm.length; i++) {
              const zm = cz.zm[i];
              ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
            }
          }, 5 * 1000);

          setTimeout(() => {
            //船只移动到中间排队
            const zm = cz.zm[0];
            // //获取闸门的位置，以闸门位置为参照移动
            // ue4Viewer.get(zm.code, (e) => {
            //移动船只
            for (let i = 0; i < len; i++) {
              const board = cz.boards[i];
              setTimeout(() => {
                ue4Viewer.get(board.code, e2 => {
                  let z2 = z;
                  // if (e2.boxExtent.z != 0) {
                  //   z2 = z2 + e2.boxExtent.z;
                  // }

                  //闸门口的点位置
                  let p1 = {
                    x: board.secondLocation.x,
                    y: board.secondLocation.y,
                    // z: board.secondLocation.z,
                    z: z2
                  };
                  let p2 = {
                    x: board.thirdLocation.x,
                    y: board.thirdLocation.y,
                    // z: board.movetoLocation.z,
                    z: z2
                  };
                  // console.log(cz.watercode, e2, p);

                  //旋转°
                  let p3 = {
                    yaw: board.oldLocation.rotateZ,
                    pitch: board.oldLocation.rotateY,
                    roll: board.oldLocation.rotateX
                  };
                  ue4Viewer.objectRotate(board.code, p3, 1);
                  //移动到闸门口
                  ue4Viewer.objectMoveTo(
                    board.code,
                    p1,
                    board.secondLocation.duration
                  );

                  setTimeout(() => {
                    let p4 = {
                      yaw: board.secondLocation.rotateZ,
                      pitch: board.secondLocation.rotateY,
                      roll: board.secondLocation.rotateX
                    };
                    ue4Viewer.objectRotate(board.code, p4, 1);

                    ue4Viewer.objectMoveTo(
                      board.code,
                      p2,
                      board.thirdLocation.duration
                    );
                  }, board.secondLocation.duration * 1000);
                });
              }, i * 5 * 1000);
            }

            // });
          }, 5 * 1000);

          //所有船只都进入排队后，才关闭闸门
          let thirdDurations = cz.boards.map(x => x.thirdLocation.duration);
          //移动中间水位+打开闸门+最后只船开始移动的时间间隔+起点到闸门口的时间+闸门口到中间等待区的时间
          let d2 = 5 + 5 + (len - 1) * 5 + 5 + Math.max(...thirdDurations); //

          //关闭闸门
          setTimeout(() => {
            for (let i = 0; i < cz.zm.length; i++) {
              const zm = cz.zm[i];
              ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
            }
          }, d2 * 1000);
        });

        //所有船只都排队后，才下降水位
        let secondDurations = cz.boards.map(x => x.secondLocation.duration);
        let d3 = 20 + len * 5 + Math.max(...secondDurations); //排队出发多少s

        //获取下游水位的高度
        setTimeout(() => {
          ue4Viewer.get(cz.water.targetCode2, e => {
            console.log(cz.water.targetCode2, e);

            //降低中间水位
            let z = e.location.z;
            if (e.boxExtent.z > 0) {
              z = e.location.z + e.boxExtent.z;
            }
            ue4Viewer.get(cz.water.code, e2 => {
              let p = {
                x: e2.location.x,
                y: e2.location.y,
                z: z //上游水位z值
              };
              //手动设置一个差值
              if (cz.water.vectorZ && cz.water.vectorZ != 0) {
                p.z = p.z + cz.water.vectorZ;
              }

              ue4Viewer.objectMoveTo(cz.water.code, p, 2);
            });

            //降低船只z值
            for (let i = 0; i < len; i++) {
              const board = cz.boards[i];

              ue4Viewer.get(board.code, e2 => {
                let p = {
                  x: e2.location.x,
                  y: e2.location.y,
                  z: z //上游水位z值
                };

                ue4Viewer.objectMoveTo(board.code, p, 2);
              });
            }

            //打开下游闸门
            setTimeout(() => {
              for (let i = 0; i < cz.zm2.length; i++) {
                const zm = cz.zm2[i];
                ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
              }
            }, 5 * 1000);

            //船只移动去远方
            setTimeout(() => {
              for (let i = 0; i < len; i++) {
                const board = cz.boards[i];

                setTimeout(() => {
                  ue4Viewer.get(board.code, e2 => {
                    let p = {
                      x: board.movetoLocation.x,
                      y: board.movetoLocation.y,
                      z: z //上游水位z值
                    };

                    ue4Viewer.objectMoveTo(
                      board.code,
                      p,
                      board.movetoLocation.duration
                    );
                  });
                }, i * 5 * 1000);

                if (i == len - 1) {
                  //所有船只出去后，才关闭闸门
                  let movetoLocation = cz.boards.map(
                    x => x.movetoLocation.duration
                  );
                  let d4 = i * 5 + 10; //

                  //关闭闸门
                  setTimeout(() => {
                    for (let j = 0; j < cz.zm2.length; j++) {
                      const zm = cz.zm2[j];
                      ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
                    }
                  }, d4 * 1000);
                }

                //隐藏船只
                let d3 = i * 5 + board.movetoLocation.duration;
                setTimeout(() => {
                  ue4Viewer.hide(board.code);

                  if (i == len - 1) {
                    //设置可点击
                    this.setCzDisabled(false);
                  }
                }, d3 * 1000);
              }

              // let movetoDurations = cz.boards.map(
              //   (x) => x.movetoLocation.duration
              // );
              // let d3 = len * 5 + Math.max(...movetoDurations); //排队出发多少s
            }, 10 * 1000);
          });
        }, d3 * 1000);
      } else {
        this.initCZUe4();
        //关闸
      }
    },
    //初始化船闸数据
    initCZUe4() {
      let ue4Viewer = this.ue4Viewer;
      let czList = this.czList;
      for (let i = 0; i < czList.length; i++) {
        const cz = czList[i];
        for (let j = 0; j < cz.boards.length; j++) {
          const board = cz.boards[j];
          //将船移动到原始位置
          let p = {
            x: board.oldLocation.x,
            y: board.oldLocation.y,
            z: board.oldLocation.z
          };
          ue4Viewer.objectMoveTo(board.code, p, 0);
        }
        ue4Viewer.hide(cz.boards.map(x => x.code));
      }

      //保持闸门关闭
    },
    //展开、收缩切换
    shrinkbtnClick(e) {
      if (e == 1) {
        this.envPanel = {
          weather: !this.envPanel.weather,
          water: false,
          other: false
        };
      }
      if (e == 2) {
        this.envPanel = {
          weather: false,
          water: !this.envPanel.water,
          other: false
        };
      }
      if (e == 3) {
        this.envPanel = {
          weather: false,
          water: false,
          other: !this.envPanel.other
        };
      }
    },
    //光源强度修改
    lightStrengthChange(value) {
      //设置光照强度
      let ue4Viewer = this.ue4Viewer;
      let p = {
        intensity: value
      };
      ue4Viewer.setLight(this.light.code, p);
    },
    //光源角度修改
    lightTimesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.changeWeather(this.weather.curweather, 100 * value);
    },
    //垂直角度修改
    verticalAngleChange(val) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        ue4Viewer.objectRotateTo(code, {
          yaw: val,
          pitch: e.rotate.pitch,
          roll: e.rotate.roll
        });
      });
    },
    //水平角度修改
    horizontalAngleChange(val) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        // ue4Viewer.objectRotateTo(this.light.code, zm.rotateParam);
        ue4Viewer.objectRotateTo(code, {
          yaw: e.rotate.yaw,
          pitch: val,
          roll: e.rotate.roll
        });
      });
    },
    //角度格式化
    angleFormatter(val) {
      return val + "°";
    },
    //获取下游水位
    getWaterLevel() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.get("Actor_XSZ_05", e => {
        console.log("当前泄水闸", e);
      });
      ue4Viewer.get("BP_FluxModifierSourceActor05", e => {
        console.log("当前泄水闸flux2", e);
      });
    },
    //设置水平面
    setWaterLevel() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.get("S_XYSM_001", e => {
        //移动水位
        ue4Viewer.get("BP_FluxSimulation_2", e2 => {
          ue4Viewer.objectMoveTo("S_XYSM_001", {
            // x: e.location.x,
            // y: e.location.y,
            z: e2.location.z
          });
        });
      });
    },
    //泄水闸分组切换
    groupChange(e, group) {
      let checked = e.target.checked;
      for (let i = 0; i < this.opennessInfo.length; i++) {
        const openness = this.opennessInfo[i];
        if (openness.group == group.title) {
          openness.checked = checked;
        }
      }
    },
    /**********滑动条 start************************************* */
    //滑条开合度操作修改
    opennessChange2(value, item) {
      this.focus(item.code);
      //联动
      let openness = this.opennessInfo.filter(x => x.checked);
      if (!item.checked) {
        openness.push(item);
      }
      for (let index = 0; index < openness.length; index++) {
        const element = openness[index];
        element.openness = value;
        element.openness2 = value;
      }
      this.opennessChangeHandle(value, openness);
    },
    //数字开合度操作修改，避免输入 80% 时，出现两次8->80开合
    opennessChange(e, item) {
      let value = item.openness2;
      item.openness = item.openness2;
      this.focus(item.code);
      //联动
      let openness = this.opennessInfo.filter(x => x.checked);
      if (!item.checked) {
        openness.push(item);
      }
      for (let index = 0; index < openness.length; index++) {
        const element = openness[index];
        element.openness = value;
        element.openness2 = value;
      }
      this.opennessChangeHandle(value, openness);
    },
    opennessChangeHandle(value, items) {
      let ue4Viewer = this.ue4Viewer;
      //打开闸门
      let angle = (this.maxangle * value) / 100;
      for (let index = 0; index < items.length; index++) {
        const item = items[index];
        this.openGate(item.code, angle);
      }

      // setTimeout(() => {
      //打开水流程效果
      let style = this.maxStyle;
      if (angle == 0) {
        style = this.minStyle;
      }
      // {
      //   volume: (this.maxStyle.volume * angle) / 100,
      //   speedX: 0,
      //   speedY: (this.maxStyle.speedY * angle) / 100,
      //   edge: (this.maxStyle.edge * angle) / 100,
      //   intensity: (this.maxStyle.intensity * angle) / 100,
      //   duration: -1,
      // };
      let codes = items.map(x => x.code);
      ue4Viewer.waterControl(codes, style);
      // }, 5 * 1000);
    },
    //闸门开合度的格式化
    percentFormatter(val) {
      return val + "%";
    },
    callBack(value) {
      console.log("value", value);
    },
    /**********滑动条 end************************************* */
    //初始化光照
    initLight() {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        this.light.verticalAngle = e.rotate.yaw;
        this.light.horizontalAngle = e.rotate.pitch;
      });
      //获取光源强度
      ue4Viewer.getLight(code, e => {
        console.log("3");
      });
    },
    //初始化开度数据
    intiOpenness() {
      let data = [];
      for (let i = 0; i < xszdevice.rows.length; i++) {
        const row = xszdevice.rows[i];
        row.checked = false;
        row.openness2 = row.openness;
        data.push(row);
      }
      this.opennessInfo = data;
      this.valueData = data;
    },
    //关闭泄水闸
    closeXszOpenness() {
      let ue4Viewer = this.ue4Viewer;
      let datas = this.opennessInfo;
      datas.forEach(item => {
        //关闭闸门
        this.openGate(item.code, 0);
      });
      setTimeout(() => {
        let style = this.minStyle;
        let codes = datas.map(x => x.code);
        ue4Viewer.waterControl(codes, style);
      }, 0);
      //隐藏水效果
      ue4Viewer.hide(this.fluxWaterCode);
    },
    //初始化 阀门及流水
    initXSZUe4() {
      let ue4Viewer = this.ue4Viewer;
      let datas = this.opennessInfo;
      datas.forEach(item => {
        let value = item.openness;
        //打开闸门
        let angle = (this.maxangle * value) / 100;
        this.openGate(item.code, angle);
        //打开水流程效果
        // let style = {
        //   volume: (this.maxStyle.volume * angle) / 100,
        //   speedX: 0,
        //   speedY: (this.maxStyle.speedY * angle) / 100,
        //   edge: (this.maxStyle.edge * angle) / 100,
        //   intensity: (this.maxStyle.intensity * angle) / 100,
        //   duration: -1,
        // };
      });
      //显示水效果
      ue4Viewer.show(this.fluxWaterCode);
      setTimeout(() => {
        let style = this.maxStyle;
        let codes = datas.filter(x => x.openness > 0).map(x => x.code);
        ue4Viewer.waterControl(codes, style);
      }, 1 * 1000);
      console.log("显示水效果:" + new Date().getTime());
      // //10s后抬升水面
      // setTimeout(() => {
      //   //抬升3次，每次抬升20个单位
      //   for (let i = 0; i < 5; i++) {
      //     setTimeout(() => {
      //       console.log("objectMove", "S_XYSM_001", i);
      //       ue4Viewer.objectMove("S_XYSM_001", {
      //         x: 0,
      //         y: 0,
      //         z: 40,
      //       });
      //     }, i * 5 * 1000);
      //   }
      // }, 10 * 1000);
      // //5分钟后，关闭水效果
      // setTimeout(() => {
      //   let style = this.minStyle;
      //   let codes = datas.map((x) => x.code);
      //   ue4Viewer.waterControl(codes, style);
      // }, 5 * 60 * 1000);
    },
    //页面的默认加载事件
    initPage() {
      this.intiOpenness();
      // this.initLight();
      // this.initXSZUe4();
    },
    //页面切换后事件
    unloadPage() {
      this.closeXszOpenness();
    },
    //跳转闸门视角
    focus(ue4id) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.focus(ue4id);
    },
    //打开闸门
    openGate(ue4id, roll) {
      let ue4Viewer = this.ue4Viewer;
      // ue4Viewer.focus(ue4id);
      ue4Viewer.objectRotateTo(ue4id, {
        roll: roll,
        pitch: 0,
        yaw: 0
      });
    },
    //水轮发电机组的初始化
    initSLFDJZ() {
      let ue4Viewer = this.ue4Viewer;
      //设置水花高度z和水面高度z一致
      for (let i = 0; i < this.slfdjzList.length; i++) {
        const slfdjz = this.slfdjzList[i];
        if (Array.isArray(slfdjz.watercodes) && slfdjz.watercodes.length > 0) {
          for (let i = 0; i < slfdjz.watercodes.length; i++) {
            const watercode = slfdjz.watercodes[i];
            //水花
            ue4Viewer.get(watercode, e => {
              //下游水位
              ue4Viewer.get(slfdjz.targetwatercode, e2 => {
                console.log(e, e2);
                let p = {
                  x: e.location.x,
                  y: e.location.y,
                  z: e2.location.z + e2.boxExtent.z
                };
                ue4Viewer.objectMoveTo(watercode, p);
              });
            });
            //隐藏水花
            ue4Viewer.hide(watercode);
          }
        } else {
          //水花
          ue4Viewer.get(slfdjz.watercode, e => {
            //下游水位
            ue4Viewer.get(slfdjz.targetwatercode, e2 => {
              console.log(e, e2);
              let p = {
                x: e.location.x,
                y: e.location.y,
                z: e2.location.z + e2.boxExtent.z
              };
              ue4Viewer.objectMoveTo(slfdjz.watercode, p);
            });
          });

          //隐藏水花
          ue4Viewer.hide(slfdjz.watercode);
        }
      }
    },
    //设备类型切换
    deviceTypeChangeHandle(e) {
      //船闸仿真时不可操作
      if (this.czList[0].disabled) {
        return;
      }

      let curele = e.currentTarget;
      let pele = curele.parentElement;
      //切换active 的class
      for (let i = 0; i < pele.childElementCount; i++) {
        const ele = pele.children[i];
        if (ele.classList.contains("active")) {
          if (ele != curele) {
            ele.classList.remove("active");
          }
        } else {
          if (ele === curele) {
            ele.classList.add("active");
          }
        }
      }

      //切换数据
      let text = curele.getAttribute("data-id");
      this.activeDevice = text;
      //泄水闸
      if (text == this.DEVICETYPE.XSZ) {
        this.initXSZUe4();
        this.ue4Viewer.focus(this.opennessInfo[0].code);

        // let param = {
        //   location: {
        //     x: 8260.7119140625,
        //     y: 4693.53076171875,
        //     z: 4330.76318359375,
        //   },
        //   pitch: -10.173401832580566,
        //   yaw: -90.02466583251953,
        // };
        // this.ue4Viewer.flytoByParam(param);
      }
      //船闸
      if (text == this.DEVICETYPE.CZ) {
        //关闭泄水闸
        this.closeXszOpenness();
        this.initCZUe4();
        this.ue4Viewer.focus(this.czList[0].board.code);
        // let param = {
        //   location: {
        //     x: -20228.515625,
        //     y: -1680.5927734375,
        //     z: 4485.25341796875,
        //   },
        //   pitch: -18.071224212646484,
        //   yaw: 90.2226791381836,
        // };
        // this.ue4Viewer.flytoByParam(param);
      }
      //水轮发电机组
      if (text == this.DEVICETYPE.SLFDJZ) {
        this.closeXszOpenness();
        this.initSLFDJZ();
        this.ue4Viewer.focus(this.slfdjzList[0].centercode, 500);

        // let param = {
        //   location: {
        //     x: -2140.673828125,
        //     y: 3441.97607421875,
        //     z: 2471.384521484375,
        //   },
        //   pitch: -14.746944427490234,
        //   yaw: -87.48992156982422,
        // };
        // this.ue4Viewer.flytoByParam(param);
      }
    }
  },
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    //泄水闸分组
    xszGroups() {
      let arr = [];
      let titleArr = [];
      if (this.opennessInfo && this.opennessInfo.length > 0) {
        for (let i = 0; i < this.opennessInfo.length; i++) {
          const item = this.opennessInfo[i];
          if (!titleArr.includes(item.group)) {
            arr.push({ title: item.group, checked: false });
            titleArr.push(item.group);
          }
        }
      }
      return arr;
    }
  }
};
</script>
<style lang="less" scoped>
#simulation-main-container {
  user-select: none;

  .mc-left,
  .mc-right {
    visibility: visible;
    width: 456px;
    padding-left: 20px;
    padding-top: 15px;

    .mc-left-1 {
      // height: 224px;
      height: 22.997947%;
      margin-top: 0px;
      padding-top: 0px;

      .sub-top {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: calc(100% - 25px);
        display: flex;

        .wc-left {
          width: 134px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            width: 96px;
            height: 76px;
            // margin-top: 6px;
            // margin-top: calc(50% - 83px); //(100% + 30 - 136)/2 - 30
            margin-top: 5px;
            background-image: url(../../assets/svg/icon4-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
        .wc-right {
          width: calc(100% - 134px);
          height: 100%;
          text-align: left;
          display: flex;
          justify-content: left;
          align-items: center;

          .wc-right-top {
            // line-height: 35px;
            // margin-top: 18px;
            height: 36px;
            font-size: 20px;
            // margin-top: 40px;
            color: #fff;
          }

          .wc-right-bottom {
            font-size: 36px;
            // color: #1ff8e6;
          }
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 8px;
        display: flex;
      }
    }

    .mc-left-2 {
      height: calc(77.002053% - 20px);

      .sub-top {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 45px;
        display: flex;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: calc(100% - 45px);
        // width: 431px;
        // display: flex;
        overflow: hidden;
        padding-right: 15px;
        padding-left: 30px;
        overflow-y: auto;

        .group-title {
          text-align: left;
          font-size: 20px;
          text-indent: 5px;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid rgba(31, 248, 230, 0.4);
        }
        .opratebtns {
          overflow-x: hidden;
          overflow-y: auto;
          height: calc(100% - 20px);

          .oprateitem {
            width: calc(100% - 15px);
            padding-top: 10px;
            padding-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(31, 248, 230, 0.3);

            .checkboxitem {
              width: 36px;
            }

            .btnitem {
              width: calc(100% - 36px);
            }

            .ant-row {
              width: 100%;
            }

            .text-1 {
              font-size: 18px;
              text-align: left;
            }

            .text-2 {
              text-align: left;
            }

            .slider {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-left: 1px;
              padding-bottom: 10px;
              width: 100%;
            }

            .title {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .cz-container,
  .slfdjz-container {
    visibility: hidden;

    .mc-left-2 {
      height: auto;
      visibility: visible;

      .sub-bottom .opratebtns {
        padding-bottom: 20px;

        .oprateitem {
          padding: 15px 10px;
        }
      }
    }
  }

  .mc-right {
    position: absolute;
    right: 0px;
    padding-right: 20px;

    .mc-right-sub {
      // margin-top: 20px;
      width: 100%;
      // height: 224px;
      height: 37.577002%;
      padding-top: 0px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-right-4 {
      height: 690px;

      .sub-bottom {
        height: calc(100% - 46px);

        .data-container {
          width: calc(100% - 60px);
          margin-left: 30px;
          padding-top: 20px;

          .data-item {
            .title {
              width: 100%;
              text-align: left;
              font-size: 18px;
              position: relative;
              margin-bottom: 15px;

              .shrinkbtn {
                width: 15px;
                height: 15px;
                cursor: pointer;
                position: absolute;
                top: 10px;
                right: 10px;
                background-image: url(../../assets/svg/arrow-right.svg);
                background-position: bottom center;
                background-repeat: no-repeat;
                background-size: cover;

                &.opened {
                  background-image: url(../../assets/svg/arrow-down.svg);
                }
              }
            }

            .content {
              padding-left: 18px;
              padding-top: 15px;

              .env-item {
                .item-title {
                  text-align: left;
                  font-size: 16px;
                }
                .item-btns {
                  display: flex;
                  padding-left: 16px;
                  width: 100%;

                  .btn {
                    width: 60px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin: 10px;
                    border-radius: 7px;
                    border: 1px solid rgba(76, 222, 213, 0.5);
                    box-shadow: unset;
                    cursor: pointer;

                    &.active {
                      box-shadow: inset 0px 0px 10px 10px
                        rgba(76, 222, 213, 70%);
                    }
                  }

                  .subitem {
                    width: 100%;
                    padding-left: 10px;
                    padding-top: 10px;
                    display: block;

                    .subitem-title {
                      text-align: left;
                      font-size: 16px;
                      text-indent: 0px;
                      margin: 10px 0px 0px 0px;
                    }
                  }

                  .ant-row {
                    width: 100%;
                  }
                }

                .item-btns-1 {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }

  .mc-bottom {
    position: absolute;
    bottom: 0px;
    height: auto !important;
    width: 100% !important;
    justify-content: center;

    .type-item {
      background-image: url(../../assets/svg/Button2-1.svg);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      visibility: visible;
      height: 52px;
      width: 140px;
      margin-left: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;

      &.active {
        background-image: url(../../assets/svg/Button2-2.svg);
      }
    }

    .type-item-3 {
      width: 200px;
      background-image: unset;
      justify-content: flex-start;
      position: relative;

      .item-left {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .item-right {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: initial;

        .text {
          white-space: nowrap;
          position: absolute;
          left: 40px;
        }
      }

      &.active {
        background-image: unset;

        .item-left {
          background-image: url(../../assets/svg/Button2-2.svg);
        }

        .item-right {
          background-image: url(../../assets/svg/Button2-2.svg);
        }
      }
    }
  }

  /deep/.ant-slider {
    .ant-slider-rail {
      background-color: rgba(31, 248, 230, 0.3);
    }

    .ant-slider-track {
      background-color: rgba(31, 248, 230, 0.6);
    }

    .ant-slider-handle {
      border: solid 2px rgba(31, 248, 230, 0.6);
    }
  }

  /deep/ .ant-input-number {
    color: #f5f5f5;
    background-color: #051026f5;
    border: 1px solid rgba(76, 222, 213, 0.5);
    width: 65px;
    border-radius: 5px;
  }

  /deep/.ant-checkbox-inner {
    background-color: unset;
    border: 1px solid rgba(31, 248, 230, 0.6);
  }
  /deep/.ant-checkbox-checked .ant-checkbox-inner {
    background-color: rgba(31, 248, 230, 0.6);
    border-color: rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-checked::after {
    border: 1px solid rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-wrapper:hover .ant-checkbox-inner,
  /deep/.ant-checkbox:hover .ant-checkbox-inner,
  /deep/.ant-checkbox-input:focus + .ant-checkbox-inner {
    border: 1px solid rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-checked .ant-checkbox-inner::after {
    border-color: #0f4e4e;
  }

  /deep/.ant-switch {
    border: 1px solid rgba(31, 248, 230, 0.6);
    background-color: unset;
  }

  /deep/.ant-switch.ant-switch-checked {
    color: rgba(31, 248, 230, 0.6);
    background-color: rgba(31, 248, 230, 0.8);
  }
}

.chose {
  background-color: #1ff8e6;
}
</style>
